<template>
  <div class="m-take-head">
    <div class="first">
      <el-row>
        <el-col span="12" class="addr">
        <span class="iconfont icondingwei">
        </span>
          <span class="area">雨花台区</span>
          <span class="name">回味鸭血粉丝汤(南京南站店)</span>
          <span class="split">|</span>
          <router-link to="" class="chang-addr">切换地址</router-link>
        </el-col>
        <el-col span="12" class="user">
          <el-button class="user-btn">注册</el-button>
          <el-button class="user-btn">登录</el-button>
          <el-button class="user-btn iconfont icondingdan">我的订单</el-button>
        </el-col>
      </el-row>
      <el-row class="second">
        <el-col span="15" class="left">
          <div class="title">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#iconfangzi"></use>
            </svg>
            <span class="text">{{title}}</span>
          </div>
          <span class="split">|</span>
          <ul class="links">
            <li class="item" v-for="(item,index) in links" @click="_linkActive(index)">
              <router-link :class="{active:item.isActive}" class="link" :to="item.href">
                {{item.text}}
              </router-link>
            </li>
          </ul>

        </el-col>
        <el-col span="9" class="right">
          <input type="text" class="search-text">
          <div class="search">
            <span class="iconfont iconsousuo"></span>
          </div>

        </el-col>
      </el-row>
      <el-row></el-row>
    </div>
  </div>
</template>
<script>
  import '@/assets/take/head/head.styl'

  export default {
    data() {
      return {
        title: '商家分类',
        links: [
          {
            text: '全部',
            href: '',
            isActive: false
          },
          {
            text: '美食',
            href: '',
            isActive: false
          },
          {
            text: '正餐优选',
            href: '',
            isActive: false
          },
          {
            text: '超市',
            href: '',
            isActive: false
          },
          {
            text: '精选小吃',
            href: '',
            isActive: false
          },
          {
            text: '鲜果购',
            href: '',
            isActive: false
          },
          {
            text: '下午茶',
            href: '',
            isActive: false
          },
        ]
      }
    },
    methods: {
      _linkActive(index) {
        console.log('11111')
        this.links.forEach((item) => {
          item.isActive = false
        })
        this.links[index].isActive = true
      }
    }
  }
</script>
